<template>
  <div class="screen-manage" v-loading="loading">
    <el-button type="primary" @click="addSelector">新增</el-button>
    <template v-if="isDrag">
      <el-button type="primary" @click="saveDrag">保 存</el-button>
      <el-button @click="cancleSave">取 消</el-button>
    </template>
    <div class="content" v-loading="loading">
      <el-tabs v-model="activeName" @tab-click="tabChange">
        <el-tab-pane v-for="(item, index) in tabs" :key="index" :label="item.label" :name="item.name">
          <div class="table-box">
            <div class="hot-class">
              <div class="title-box">
                <div class="item" style="min-width: 171px">显示名称</div>
                <div class="item">道具</div>
                <div class="item">图片</div>
                <div class="item">操作</div>
              </div>
              <div class="content-box" v-if="tableData && tableData.length > 0">
                <div
                  class="dragging-item"
                  v-for="(item, index) in tableData"
                  v-dragging="{ item: item, list: tableData }"
                  :key="index"
                >
                  <div class="item">{{ item.skinName }}</div>
                  <div class="item">
                    {{ item.name }}
                  </div>
                  <div class="item">
                    <div class="pic">
                      <img :src="item.skinIcon" alt="">
                    </div>
                  </div>
                  <div class="item">
                    <el-link type="primary" @click="editProps(item)" style="margin-right: 20px;">编辑</el-link>
                    <el-link type="danger" @click="delProps(item)">删除</el-link>
                  </div>
                </div>
              </div>
              <div class="noData" v-else>
                  暂无数据
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <addSelector
      :show.sync="show"
      :propsType="activeName"
      :selector="selector"
      @confirm="confirm"
      :propsItem="propsItem">
    </addSelector>
  </div>
</template>
<script>
import addSelector from './addSelector'
export default {
    components: {
      addSelector
    },
    data () {
        return {
            loading: false,
            show: false,
            isDrag: false,
            tableData: [],
            selector: [],
            activeName: '0',
            propsItem: {},
            tabs: [
                {
                    name: '0',
                    label: '热门单品'
                }
            ]
        }
    },
    created () {
        this.getList()
    },
    mounted () {
        this.$dragging.$on('dragged', ({ value }) => {
            this.isDrag = true
        })
    },
    methods: {
        tabChange (tab, event) {
            this.activeName = tab.name
            this.getList()
            this.getSelector()
        },
        async getList () {
            this.loading = true
            let res = await this.$http.get('/deal/selectDealSelectorLabel')
            if (res.code === '0') {
                this.tableData = res.data
                if (res.data && res.data.length) {
                  this.$set(this.tabs[0], 'label', `热门单品（${res.data.length || 0}）`)
                }
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },
        // 添加筛选
        addSelector () {
            this.show = true
            this.propsItem = {}
        },
        async addSelectorLabel (data) {
            let res = await this.$http.get('/peace/addPeaceSelectorLabel', { params: data })
            if (res.code === '0') {
                this.getList()
            } else {
                if (res.code === '80020') {
                    this.$message({
                        type: 'error',
                        message: res.desc
                    })
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            }
            this.show = false
        },
        dragChange () {
            this.isDrag = true
        },
        // 保存排序
        saveDrag () {
            const data = []
            this.tableData.forEach((item, index) => {
                data.push({
                    id: item.id,
                    sort: index + 1
                })
            })
            this.$http.post('/peace/updatePeaceSelectorLabelSort', data).then((res) => {
                if (res.code === '0') {
                    this.$message.success('保存成功')
                    this.isDrag = false
                    this.getList()
                } else {
                    this.$message({
                        type: 'error',
                        message: '系统异常，请稍后再试'
                    })
                }
            })
        },
        // 编辑道具
        editProps (obj) {
            this.propsItem = obj
            this.show = true
        },
        delProps (obj) {
            let data = JSON.parse(JSON.stringify(obj))
            data.status = 0
            this.addSelectorLabel(data)
        },
        cancleSave () {
            this.getList()
        },
        confirm (data) {
            this.addSelectorLabel(data)
        }
    }
}
</script>
<style lang="scss" scoped>
.screen-manage{
  .content{
    margin: 20px 0;
  }
  .table-box {
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-right: none;
    .title-box {
      display: flex;
      border-bottom: 1px solid #ebeef5;
      .item {
        display: flex;
        align-items: center;
        flex: 1;
        word-break: break-all;
        padding: 10px;
        height: 60px;
        font-size: 14px;
        color: #909399;
        font-weight: bold;
        border-right: 1px solid #ebeef5;
      }
    }

    .content-box {
      .dragging-item {
        display: flex;
        border-bottom: 1px solid #ebeef5;
        .item {
          flex: 1;
          padding: 10px;
          font-size: 14px;
          color: #606266;
          display: flex;
          align-items: center;
          border-right: 1px solid #ebeef5;
          word-break: break-all;
          .status {
            color: #f56c6c;
          }
          .showColor {
            color: #67c23a;
          }
        }
      }
      .detail-img {
        width: 70px;
        img {
          width: 100%;
        }
      }
      .no-detail-img {
        width: 70px;
        text-align: center;
      }
    }
    .pic{
        width: 180px;
        img{
          width: 100%;
        }
    }
    .noData{
      padding: 100px 0;
      text-align: center;
      color: #999999;
    }
  }
}
</style>
